<template>
  <div>
    <!-- 头部导航 -->
    <div class="title">
      <el-breadcrumb>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>分类管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 内容 -->
    <div class="bottom_int">
      
      <el-tabs type="border-card">
        <el-tab-pane label="全部订单">
          <!-- 头部列表 -->
          <div class="AllOrders">
            <div class="shngpin">商品</div>
            <div class="maijia">买家</div>
            <div class="zhifu">支付/配送</div>
            <div class="jiage">价格</div>
            <div class="caozuo">操作</div>
            <div class="zhuangtai">状态</div>
          </div>
          <!-- 底部内容 -->
          <div class="allOld">
            <div class="allold_oindex">
              <!-- 上列表 -->
              <div class="intop">
                <div class="top_in">商城</div>
                <div style="font-weight: 700;margin-right: 30px;">2020-03-06</div>
                <div style="margin-right: 30px;margin-left: 50px;">14:21:46</div>
                <div style="color: #AFAFAF;">订单编号:sx1235648915</div>
              </div>
              <!-- 下列表 -->
              <div class="inedx">
                <div class="index_top"><img src="http://127.0.0.1:7001/public/username/2.jpg" alt=""></div>
                <div class="jiaonang">百乐眠胶囊</div>
                <div class="qian">￥30.00*1</div>
                <div class="mingzi">小兰</div>
                <div class="peisong">同城配送</div>
                <div class="jiages">￥30.00</div>
                <div class="xiangqing">查看详情</div>
                <div class="zhaungtai">已完成</div>
              </div>
            </div>
          </div>
          <div class="allOld">
            <div class="allold_oindex">
              <!-- 上列表 -->
              <div class="intop">
                <div class="top_in">商城</div>
                <div style="font-weight: 700;margin-right: 30px;">2020-03-06</div>
                <div style="margin-right: 30px;margin-left: 50px;">14:21:46</div>
                <div style="color: #AFAFAF;">订单编号:sx1235648915</div>
              </div>
              <!-- 下列表 -->
              <div class="inedx">
                <div class="index_top"><img src="http://127.0.0.1:7001/public/username/2.jpg" alt=""></div>
                <div class="jiaonang">百乐眠胶囊</div>
                <div class="qian">￥30.00*1</div>
                <div class="mingzi">小兰</div>
                <div class="peisong">同城配送</div>
                <div class="jiages">￥30.00</div>
                <div class="xiangqing">查看详情</div>
                <div class="zhaungtai">已完成</div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="待发货">
          <!-- 头部列表 -->
          <div class="AllOrders">
            <div class="shngpin">商品</div>
            <div class="maijia">买家</div>
            <div class="zhifu">支付/配送</div>
            <div class="jiage">价格</div>
            <div class="caozuo">操作</div>
            <div class="zhuangtai">状态</div>
          </div>
          <!-- 底部内容 -->
          <div class="allOld">
            <div class="allold_oindex">
              <!-- 上列表 -->
              <div class="intop">
                <div class="top_in">商城</div>
                <div style="font-weight: 700;margin-right: 30px;">2020-03-06</div>
                <div style="margin-right: 30px;margin-left: 50px;">14:21:46</div>
                <div style="color: #AFAFAF;">订单编号:sx1235648915</div>
              </div>
              <!-- 下列表 -->
              <div class="inedx">
                <div class="index_top"><img src="http://127.0.0.1:7001/public/username/2.jpg" alt=""></div>
                <div class="jiaonang">百乐眠胶囊</div>
                <div class="qian">￥30.00*1</div>
                <div class="mingzi">小兰</div>
                <div class="peisong">同城配送</div>
                <div class="jiages">￥30.00</div>
                <div class="xiangqing">查看详情</div>
                <div class="zhaungtai">已完成</div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="待收货">
          <!-- 头部列表 -->
          <div class="AllOrders">
            <div class="shngpin">商品</div>
            <div class="maijia">买家</div>
            <div class="zhifu">支付/配送</div>
            <div class="jiage">价格</div>
            <div class="caozuo">操作</div>
            <div class="zhuangtai">状态</div>
          </div>
          <!-- 底部内容 -->
          <div class="allOld">
            <div class="allold_oindex">
              <!-- 上列表 -->
              <div class="intop">
                <div class="top_in">商城</div>
                <div style="font-weight: 700;margin-right: 30px;">2020-03-06</div>
                <div style="margin-right: 30px;margin-left: 50px;">14:21:46</div>
                <div style="color: #AFAFAF;">订单编号:sx1235648915</div>
              </div>
              <!-- 下列表 -->
              <div class="inedx">
                <div class="index_top"><img src="http://127.0.0.1:7001/public/username/2.jpg" alt=""></div>
                <div class="jiaonang">百乐眠胶囊</div>
                <div class="qian">￥30.00*1</div>
                <div class="mingzi">小兰</div>
                <div class="peisong">同城配送</div>
                <div class="jiages">￥30.00</div>
                <div class="xiangqing">查看详情</div>
                <div class="zhaungtai">已完成</div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="待付款">
          <!-- 头部列表 -->
          <div class="AllOrders">
            <div class="shngpin">商品</div>
            <div class="maijia">买家</div>
            <div class="zhifu">支付/配送</div>
            <div class="jiage">价格</div>
            <div class="caozuo">操作</div>
            <div class="zhuangtai">状态</div>
          </div>
          <!-- 底部内容 -->
          <div class="allOld">
            <div class="allold_oindex">
              <!-- 上列表 -->
              <div class="intop">
                <div class="top_in">商城</div>
                <div style="font-weight: 700;margin-right: 30px;">2020-03-06</div>
                <div style="margin-right: 30px;margin-left: 50px;">14:21:46</div>
                <div style="color: #AFAFAF;">订单编号:sx1235648915</div>
              </div>
              <!-- 下列表 -->
              <div class="inedx">
                <div class="index_top"><img src="http://127.0.0.1:7001/public/username/2.jpg" alt=""></div>
                <div class="jiaonang">百乐眠胶囊</div>
                <div class="qian">￥30.00*1</div>
                <div class="mingzi">小兰</div>
                <div class="peisong">同城配送</div>
                <div class="jiages">￥30.00</div>
                <div class="xiangqing">查看详情</div>
                <div class="zhaungtai">已完成</div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {},
}
</script>

<style lang="scss" scoped>
.title {
  margin-bottom: 30px;
}
.bottom_int {
  width: 100%;
  //列表标识
  .AllOrders {
    width: 100%;
    height: 40px;
    border: 1px solid #ddd;
    display: flex;
    background: #fafafa;
    margin-bottom: 10px;
    //商品
    .shngpin {
      width: 30%;
      height: 100%;
      text-align: left;
      line-height: 40px;
      text-indent: 40px;
    }
    //买家
    .maijia {
      width: 10%;
      height: 100%;
      text-align: center;
      line-height: 40px;
    }
    //支付/配送
    .zhifu {
      width: 20%;
      height: 100%;
      text-align: center;
      line-height: 40px;
    }
    //价格
    .jiage {
      width: 10%;
      height: 100%;
      text-align: center;
      line-height: 40px;
    }
    //操作
    .caozuo {
      width: 10%;
      height: 100%;
      text-align: center;
      line-height: 40px;
    }
    //状态
    .zhuangtai {
      width: 20%;
      height: 100%;
      text-align: center;
      line-height: 40px;
    }
  }
  //底部渲染
  .allOld {
    width: 100%;
    margin-bottom: 20px;
    //列表数据
    .allold_oindex {
      width: 100%;
      height: 70px;
      border: 1px solid #ddd;
      //上列表
      .intop {
        width: 100%;
        height: 30px;
        border-bottom: 1px solid #ddd;
        line-height: 30px;
        display: flex;
        .top_in {
          margin-right: 30px;
          margin-left: 30px;
          border: 1px solid #1990ff;
          width: 40px;
          height: 22px;
          text-align: center;
          position: relative;
          top: 3px;
          line-height: 22px;
          color: #1990ff;
        }
      }
      //下列表
      .inedx{
        width: 100%;
        height: 40px;
        display: flex;
        line-height: 40px;
        //top
        .index_top{
          width: 7%;
          height: 100%;
          line-height: 60px;
          img{
            width: 30px;
            height: 30px;
            margin-left: 30px;
          }
        }
        //药品名称
        .jiaonang{
          width: 10%;
          height: 100%;
          text-align: center;
          color: #1990ff;
        }
        //数量
        .qian{
          width: 10%;
          height: 100%;
          text-align: center;
        }
        .mingzi{
          width: 16%;
          height: 100%;
          text-align: center;
        }
        .peisong{
          width: 13%;
          height: 100%;
          text-align: center;
        }
        .jiages{
          width: 17%;
          height: 100%;
          text-align: center;
        }
        .xiangqing{
          width: 10%;
          height: 100%;
          text-align: center;
        }
        .zhaungtai{
          width: 14%;
          height: 100%;
          text-align: center;
        }
      }
    }
  }
}
</style>
